<div>
  <h2>打包优化</h2>
  <h3>HappyPack</h3>
  <li>
    重复一条工程领域的经验--不要过早的优化，在项目的初期不要看到任何优化点就拿来加到项目中，这样不但增加了复杂度，优化的效果也不会太理想。一旦是当项目发展到一定规模后，性能 问题随之而来，这时再去分析然后对症下药。
  </li>
  <li>
    HappyPack是一种通过多线程来提升 webpack 打包速度的工具，当我们把 babel-loader 和 ts-loader 迁移到 HappyPack之后，一般都可以接受到不错的效果，在实际使用时，要用 HappyPack提供的 loader 替换原有的 loader,当使用它优化多个 loader 时，需要为每一个 loader 配置一个 id
  </li>

  <h3>tree shaking</h3>
  <li>
    ES6 的依赖关系的构建实在代码编译时而不是运行时。基于这项特性 webpack 提供了 tree shaking 功能 <span>它在打包过程中帮助我们检测工程中没有被引入过的模块，这部分代码将永远无法被执行到。</span>。因此也叫做死代码。webpack 会对这部分代码进行标记
  </li>
  <li>
    tree shaking 只能对 es6 modules有效。
  </li>
  <li>
    如果我们在工程中使用了 babel-loader，一定要通过禁用它的模块解析，否则无法进行 tree shaking <span>@babel/preset-env, {modules: false}</span> 
  </li>
  <li>
    我们将死代码标记之后，还要通过前面介绍的 terser-webpack-plugin 来进行去除。webpack4 中，将 mode 设置为 production 也能达到相同的目的
  </li>
</div>